{% extends "myhome/base.html"%}

{% block title %}
<title>我的订单</title>
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/order.css">
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/order-app.css">
{% endblock %}

{% block con %}

<div class="mainbody order">
		<div class="container">
			<!-- 面包屑导航 -->
			<div class="crumbs col-xs-12 col-sm-12">
				<ol class="breadcrumb">
					<li class="hidden-xs hidden-sm"><a href="/">首页</a></li>
					<!--<li class="hidden-xs hidden-sm"><a href="member.html">我的商城</a></li>-->
					<li class="active">我的订单</li>
				</ol>
			</div><!-- 面包屑导航 E-->

			<div class="main clearfix">
				<!-- 左侧导航 -->
				<div class="left-nav f-fl col-md-4 hidden-xs hidden-sm">
					<div class="nav-main">
						<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
						<a href="{% url 'member_order'%}" class="ml active" >我的订单</a>
						<a href="#" class="ml " >我的回购单</a>
						<a href="#" class="ml " >我的意外保</a>
						<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
						<a href="/#" class="ml " >地址管理</a>
						<a href="#" class="ml " >我的收藏</a>
						<a href="#" class="ml " >消息提醒</a>
						<a href="#" class="ml " >建议反馈</a>
					</div>
				</div><!-- 左侧导航 E-->
				<!-- 右侧内容展示 -->
				<div class="right-content f-fr col-md-8 col-xs-12 col-sm-12">
					<div class="order-main">
						<div class="type-tab-btn">
							<a href="{% url 'member_order'%}" class="allOrder active col-20" data-type="-1">全部订单</a><i class="line hidden-xs hidden-sm">|</i>
							<a class="waitPay col-20" href="{% url 'member_order'%}?status=0" data-type="0">待付款<span class="amount _actAmount"></span></a><i class="line hidden-xs hidden-sm">|</i>
							<a class="waitDeliver col-20" href="{% url 'member_order'%}?status=1" data-type="1">已付款</a><i class="line hidden-xs hidden-sm">|</i>
							<a class="hasDeliver col-20" href="javascript:;" data-type="2">已发货</a><i class="line hidden-xs hidden-sm">|</i>
							<a class="other col-20" href="javascript:;" data-type="99">其他</a>
						</div>
						<div class="list-head hidden-xs hidden-sm">
                        <ul class="clearfix">
                            <li class="w50">
                                <select id="checkType" class="check-type">
                                    <option value="0">近三个月的订单</option>
                                    <option value="1">全部订单</option>
                                </select>
                                订单明细
                            </li>
                            <li class="w125">售后</li>
                            <li class="w125">金额</li>
                            <li class="w125">状态</li>
                            <li class="w125">操作</li>
                        </ul>
						</div>
						<div id="tableList" class="type-contain ui-load-container">
							<div class="ui-load-content"><input id="unPayNum" value="0" type="hidden">
								<table class="orderItem">
									<tbody>
                                        <!--循环(后台传过来的)订单id-->
                                        {%  for i in order %}
										<tr class="trHead hidden-xs hidden-sm">
											<td colspan="4" class="title clearfix">
											  <div class="f-fl">下单时间：<span class="time">{{i.addtime}}</span>订单号：<span class="orderNumber">{{i.id}}</span>
											  </div>
											</td>
										</tr>
										<tr class="list-box b-l b-r b-b">
											<td class="list b-r j-iamCart">
												<div class="cart-wrap j-CartWrap">
													<div class="shop j-shop j-amLight">
                                                        <!--通过每个订单中的外键   循环子表中 -->
                                                        {% for x in i.orderinfo_set.all %}
														<div class="item b-t clearfix j-item j-iamMain">
															<a class="productDetail nameWidth col-xs-4 col-sm-4" href="{% url 'info' %}?id={{x.goodsid.id}}" target="_blank">
																<!--通过 订单详情中的外键 查找商品表中的(主表) 图片-->
                                                                <img src="{{x.goodsid.pic_url}}" class="f-fl">
															</a>
															<div class="describe f-fl col-xs-8 col-sm-8">
																<div class="vertic clearfix">
																	<span class="clearfix">
																		<a class="productDetail nameWidth" href="#" target="_blank">
																			<i>{{x.goodsid.title}}</i> <i class="pro-d"></i>
																		</a>
																		<p>
																		￥{{x.goods.price}}×{{x.num}}
																		</p>
																	</span>
																</div>
															</div>
															<input class="orderSn" value="51090244361541573081" type="hidden">
															<input class="isCart" value="1" type="hidden">
															<input class="orderSnSon" value="21090244361541579081" type="hidden">
														</div>
                                                        {% endfor %}

													</div>
												</div>
											</td>
											<td class="b-r w125 center price b-t hidden-xs hidden-sm">
												<div class="priceDiv">
													￥ {{i.totalprice}}

												</div>
											</td>
											<td class="b-r w125 center state b-t hidden-xs hidden-sm">
												<div class="stateDiv">
													  {% if i.status == 0 %}
                                                         <div>未支付<br></div>
                                                      {% elif i.status == 1%}
                                                         <div>已支付<br></div>
                                                      {% elif i.status == 2%}
                                                         <div>已发货<br></div>
                                                      {% endif %}

												</div>
											</td>
											<td class="w125 center opreat b-t hidden-xs hidden-sm">
												<ul>
													<li class="more"><a href="{% url 'order_info'%}?id={{i.id}}" target="_blank">查看详情</a></li>
												</ul>
											</td>
										</tr>
                                    {% endfor %}
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}